Layouts

Layouts help you to customize the main view of your app. There is 14 different layout views and we made it really simple to change layouts, by simply changing a class name your entire layout will change automatically and adopt to any screen.

Default Layout

This is the default MegaDin layout style.

Right side open by default

To get this layout, add the class ui-content-compact to the id="content"

Left side white nav

To get this layout, add the class ui-aside--light to the id="aside"

Right side overlay

To get this layout, add the class ui-content-aside-overlay to the id="content"

Left side compact view

To get this layout, add the class ui-aside-compact to the id="ui"
```
    ...
```
Left side compact right side open

To get this layout, first add the class ui-aside-compact to the id="ui", second add the class ui-content-compact to the id="content"
```
    ...

    
    
        ...
    
    

    ...
```

Left side Dark

To get this layout, add the class ui-aside--dark to the id="aside"

Left side full

To get this layout, add the class navbar-header--default to the id="header" > navbar-header

Layout full width-height

To get this layout, first add the class ui-fullWhith to the id="ui", second add the class u-padding0 to the id="content" > ui-content-body
```
    ...

    
    
        

            ...

        
    
    

    ...
```

Logo background contrast color

To get this layout, add the class navbar-header--dark to the id="header" > navbar-header

Boxed Layout

To get this layout, add the class box-page-bg to the body

Header green bg

To get this layout, add the class ui-header--green text-white to the id="header"
```
    
    
        ...
    
    

    ...
```
Header purple bg

To get this layout, add the class ui-header--purple text-white to the id="header"
```
    
    
        ...
    
    

    ...
```
Header blue bg

To get this layout, add the class ui-header--blue text-white to the id="header"
```
    
    
        ...
    
    

    ...
```
Header blue bg

To get this layout, add the class ui-header--dark text-white to the id="header"
```
    
    
        ...
    
    

    ...
```

Introduction

Apps

Charts

UI Elements

Components

Extras

Layouts

Default Layout

Right side open by default

Left side white nav

Right side overlay

Left side compact view

Left side compact right side open

Left side Dark

Left side full

Layout full width-height

Logo background contrast color

Boxed Layout

Header green bg

Header purple bg

Header blue bg

Header blue bg